var index = 0;

// 用元素的点击事件控制索引; 
var button_next = $(".button-next");
var button_prev = $(".button-prev");
var slides = $(".slide");
var container = $(".container");
var wrapper = $(".wrapper");
// 自动播放的定时器;
var t = null;

function bindEvent() {
      button_next.on("click", addIndex);
      button_prev.on("click", reduceIndex);
      // 把运动事件绑定给按钮的共同父级; 
      // - 按钮点击的事件一定会冒泡的父级元素; 
      container.on("click", ".button-prev , .button-next", changeBanner);
      container.on("mouseover", function () {
            // 终止自动播放; 
            stop();
      })
      container.on("mouseout", function () {
            // 开启自动播放; 
            autoPlay();
      })
}
function changeBanner() {
      wrapper
            .stop(true)
            .animate({ left: -index * 1280 });
}
// 索引递增的函数逻辑 ; 
function addIndex() {
      // 索引需要归零 ; 
      if (index === slides.length - 1) {
            wrapper.css({ left: 0 })
            index = 1;
      } else {
            index++;
      }
}
function reduceIndex() {
      // 在这里写好index处理逻辑; 
      if (index === 0) {
            index = slides.length - 1;
            wrapper.css({ left: - 1280 * index })
            // index --;
      } else {
            index--
      }
}
bindEvent();
// 调用函数就可以实现自动播放功能; 
function autoPlay() {
      // 自动播放必须是用定时器执行程序; 
      t = setInterval(function () {
            button_next.trigger("click");
      }, 3000);
}

// 终止自动播放; 
function stop() {
      clearInterval(t);
}

autoPlay();